<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="net.groupme.gui.rendering.constants.RENDERING_CONSTANTS"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Welcome to GroupMe! ...where Semantic Web meets Web 2.0 - [Home]</title>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/metaheader.jsp" %>
	
	<!--  Ajax-Includes -->
    <script type='text/javascript' src='/GroupMe/dwr/interface/DWRUserManager.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/interface/DWRSearchManager.js'></script>
    <script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRGameManager.js'></script>
    <script type='text/javascript' src='./dwr/engine.js'></script>
	<script type='text/javascript' src='./dwr/util.js'> </script>
	<script src="./scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="./scriptaculous/scriptaculous.js" type="text/javascript"></script>
    
    <script type="text/javascript" language="javascript">
    <!--//--><![CDATA[//><!--
	
	/**
	 * Check the GameManager if there are new Games...
	 */
	 function checkForNewGames(pe) {
	 	DWRGameManager.getPendingGames(checkForNewGamesCompleted);
  	 }
  	 
  	 /**
  	  * AjaxController returned the games, which are at the moment waiting for a second player.
  	  */
  	 function checkForNewGamesCompleted(games){
  	 	var gameList = new String();
  	 	if(games.size() > 0){
	  	 	gameList += "<table>";
	  	 	gameList += "<colgroup><col width='15%'/><col width='40%'/><col width='40'/><col width='5%'/></colgroup>";
	  	 	gameList += "<tr><td><strong>User</strong></td><td><strong>Topic</strong></td><td><strong>Created</strong></td><td></td></tr>";
	  	 	for(var i=0; i<games.size(); i++){
	  	 		//user:
	  	 		gameList += "<tr><td>" + games[i].username;
	  	 		if(actualUserName == games[i].username){
	  	 		 	gameList += " (you)";
	  	 		}
	  	 		gameList += "</td>";
	  	 		
	  	 		//topic:
	  	 		gameList += "<td>" + games[i].gametopic + "</td>";
	  	 		
	  	 		//time:
	  	 		gameList += "<td>" + games[i].creationTimeAsString + "</td>";
	  	 		 
	  	 		//join button:
	  	 		if(actualUserName == games[i].username){
	  	 		 	gameList += "<td>waiting for 2nd player...</td>";
	  	 		}else{
	  	 			gameList += "<td><form action='<%= VIEW_VOCABULARY.ACTION_JOIN_GAME_FROM_QUEUE %>'> " +
	  	 					"<input type='hidden'  name='<%= VIEW_VOCABULARY.PARAMETER_GAME_ID %>' " +
	  	 					"value='" + games[i].id + "'/>" +
	  	 					"<input id='joinGameButton' type='submit' value='join game'/>"
	  	 					"</form></td>";
	  	 		}
	  	 		gameList += "</tr>";
	  	 	}
	  	 	gameList += "</table>";
	  	 }else{
	  	 	gameList += "<i style='color: gray;'>No pending games at the moment.<br/><br/><img src='<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>'/> Scanning for games...</i>"; 
	  	 }
	  	 
	  	 if(gameList != actualGameList){
	  	 	$('gameList').innerHTML = gameList;
	  	 	actualGameList = gameList;
	  	 }
  	 }
  	 
	/**
	 * PeriodicalExecuter that checks for new games:
	 */
	<c:if test="${userManager.loggedIn}"> 
		var periodicalExecuter = new PeriodicalExecuter(checkForNewGames, 3);
	</c:if>
	/** the username of the actual user */
	var actualUserName = new String();
	
	/** the actual list of pending games as a string */
	var actualGameList = new String();
// Note t
	//init stuff:		
	function init() {
		//
		<c:if test="${userManager.loggedIn}">
			checkForNewGames(periodicalExecuter);
			actualUserName = '<c:out value="${userManager.user.userName}"/>';  
		</c:if>
	}

	//--><!]]>
    </script>
</head>
<body onload="init()">
	<!-- title image, logo:  -->
	<div id="header">
		<%@ include file="./game-includes/titleheader.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/menu.jsp" %>
	</div>

	<!-- content -->
	<div id="main">
	<c:choose>
		<c:when test="${userManager.loggedIn}">
		<center>
			<h1><strong>Welcome to the GroupMe! Game.</strong></h1><br/>
			Choose a game or create a new game with an own topic.<br/>
			<% if (!(request.getAttribute(VIEW_VOCABULARY.PARAMETER_GAME_CREATION_ERROR) == null)){ %>
				<h3><%= request.getAttribute(VIEW_VOCABULARY.PARAMETER_GAME_CREATION_ERROR) %></h3>
			<%} %>
		
			<br/><br/>
		
			<strong style="font-size: large; font-style: italic; margin-top: 3em">Join game</strong><br/><br/>
				
			<div id="gameList">
			    <img src="<%= request.getContextPath() + RENDERING_CONSTANTS.RELATIVE_PATH_OF_AJAX_LOADING_IMAGE %>"/> 
				Loading pending games... 
			</div>
			
			<div id="newGameBox">
					<strong style="font-size: large; font-style: italic">Create a new game</strong>
					<br/><br/>
					<form action="<%= VIEW_VOCABULARY.ACTION_CREATE_OWN_GAME %>"> 
						<table>
							<tr>
								<td>Enter your topic: </td>
								<td><input id="gameTopicInput" type="text" name="<%= VIEW_VOCABULARY.PARAMETER_GAME_TOPIC %>" value=""/> </td>
								<td><input type="submit" value="open game"/> </td>
							</tr>
						</table>
					</form>
				</div>
		</center>
		</c:when>
			<c:otherwise>
				<div style="margin-left:15%">
					<h1>GroupMe! Home</h1>
					<p>Please login first! You do not have a GroupMe! account yet? Then quickly create one: 
						<a href="<%= VIEW_VOCABULARY.ACTION_REGISTRATION %>" title="Create a GroupMe! account">create account</a>
					</p>
					<p><strong>Login:</strong></p>
					<%@ include file="./jsp-includes/login.jsp" %>
				</div>
			</c:otherwise>
		</c:choose>
	
		<!-- footer -->
		<div id="footer">
			<%@ include file="./jsp-includes/footer.jsp" %>
		</div>
	</div>
	
</body>
</html>